import { useEffect, useMemo } from 'react'
import dayjs from 'dayjs'
import { Card, Segmented } from 'antd'

import { CusAgGrid } from '@/components/CusAgGrid'
import { getLogisticsStatusName, getRouteNodeName } from '@oBiz/TrackOrder/utils'
import { useUrlParams } from '../utils'
import { Cell } from './Cell'
import { INotice, TCol } from './interface'
import { useBoundStore } from './store'
import { useNoticeList } from './useNoticeList'
import { getNoticeStatusName } from './utils'
import styles from './styles.module.less'

export const CustomerNotice = () => {
  useNoticeList() // 放最顶部
  const { waybillNo } = useUrlParams()

  const gridRef = useBoundStore(v => v.gridRef)
  const loading = useBoundStore(v => v.request?.loading)
  const data = useBoundStore(v => v.request?.data)
  const noticeStatus = useBoundStore(v => v.reqData.noticeStatus)
  const setReqData = useBoundStore(v => v.setReqData)
  const getData = useBoundStore(v => v.getData)

  // 列配置
  const defaultColDef = useMemo<Partial<TCol>>(
    () => ({
      flex: 1,
      minWidth: 121,
      sortable: false,
      cellRenderer: Cell,
    }),
    [],
  )
  const columnDefs = useMemo(
    () => [
      {
        field: 'logisticsStatus',
        headerName: '物流状态',
        valueFormatter: ({ value }) => getLogisticsStatusName(value) || '',
      } satisfies TCol<'logisticsStatus'>,
      {
        field: 'routeNode',
        headerName: '路由节点',
        valueFormatter: ({ value }) => getRouteNodeName(value) || '',
      } satisfies TCol<'routeNode'>,
      {
        field: 'routeTitle',
        headerName: '路由',
        flex: 2,
        minWidth: 121 * 2,
      } satisfies TCol<'routeTitle'>,
      {
        field: 'occurDate',
        headerName: '发生时间',
        flex: 0.01,
        minWidth: 185,
        valueFormatter: ({ value }) => (value ? dayjs(value).$formatSmart($F_YMDHms) : ''),
      } satisfies TCol<'occurDate'>,
      {
        field: 'noticeStatus',
        headerName: '通知状态',
        valueFormatter: ({ value }) => getNoticeStatusName(value) || '',
      } satisfies TCol<'noticeStatus'>,
      {
        field: 'noticeDate',
        headerName: '通知时间',
        flex: 0.01,
        minWidth: 185,
        valueFormatter: ({ value }) => (value ? dayjs(value).$formatSmart($F_YMDHms) : ''),
      } satisfies TCol<'noticeDate'>,
      {
        field: 'noticeId',
        headerName: '操作',
        flex: 0.01,
        width: 110,
        minWidth: 110,
        pinned: 'right',
      } satisfies TCol<'noticeId'>,
    ],
    [],
  )

  // 初始化
  useEffect(() => {
    setReqData(undefined, waybillNo)
    getData(true)
  }, [getData, setReqData, waybillNo])

  // 清理
  useEffect(() => () => useBoundStore.setState(useBoundStore.getInitialState(), true), [])

  return (
    <Card styles={{ body: { height: 660 } }} title="客户通知">
      <div className={styles.box}>
        <div className={styles.header}>
          <div className={styles.header_filter}>
            <Segmented<number>
              options={[
                { label: '全部', value: -1 },
                ...getNoticeStatusName.valueList.map(v => ({ label: getNoticeStatusName(v), value: v })),
              ]}
              value={noticeStatus ?? -1}
              onChange={v => {
                gridRef.current?.api?.ensureIndexVisible(0, 'top')
                setReqData(v === -1 ? undefined : v)
                getData(true)
              }}
            />
          </div>
        </div>
        <div className={styles.main}>
          <CusAgGrid<INotice>
            ref={gridRef}
            loading={loading}
            rowData={data}
            defaultColDef={defaultColDef}
            columnDefs={columnDefs}
          />
        </div>
      </div>
    </Card>
  )
}
